<template>
  <div class="app">
    <!-- <Inputs/>
    <Com/> -->

    <!-- <Father/> -->
<!-- 
    <Tab :arr="arr1" :index="1" type="vertical"/>

    <Tab :arr="arr2" :index="2" type="horizontal" /> -->

    <!-- <Tab />

    <Tab /> -->
    <!-- <Father/> -->

    <!-- <Dialog/> -->

    <One/>
    <Two/>
  </div>
</template>

<script>
import Inputs from "./components/Inupt";
import Com from "./components/Com.vue";

// import Father from "./components/Father.vue";

import Tab from "./components/Tab.vue";
import Father from './components2/Father.vue'

import Dialog from './components3/Dialog.vue'

import One from './components4/One.vue'
import Two from './components4/Two.vue'
export default {
  // 注册组件
  components: {
    // key是将来在页面中使用的名称
    // value是对应引入的组件
    Inputs,
    Com,
    Father,
    Tab,
    Dialog,
    One,
    Two
  },
  data() {
    return {
      arr1: [
        {
          title: "语文",
          con: "语文的内容",
        },
        {
          title: "数学",
          con: "数学的内容",
        },
        {
          title: "英语",
          con: "英语的内容",
        },
      ],
       arr2: [
        {
          title: "历史",
          con: "历史的内容",
        },
        {
          title: "化学",
          con: "化学的内容",
        },
        {
          title: "生物",
          con: "生物的内容",
        },
        {
          title: "政治",
          con: "政治的内容",
        },
        {
          title: "社会",
          con: "社会的内容",
        }
      ],
    };
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.active {
  color: red !important;
}
html, body, .app, .dialog {
  height: 100%;
}
</style>